<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/admin' }">管理首页</el-breadcrumb-item>
			<el-breadcrumb-item>分类编辑</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form v-loading="tableDataLoading" :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="分类名称" prop="Name" :rules="[{ required: true, message: '分类名称不能为空'},]">
				<el-input v-model.number="numberValidateForm.Name" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
				<el-button @click="resetForm('numberValidateForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
export default {
  data() {
    return {
      tableDataLoading: false,
      numberValidateForm: {
        Name: "",
        link: ""
      }
    };
  },
  created() {},
  mounted() {
    if (this.$route.query.set) {
      this.numberValidateForm = this.saverFn.local.get("setCategory");
      console.log(this.numberValidateForm);
    }
  },
  components: {},
  computed: {},
  methods: {
    submitForm(formName) {
      let _this = this;
      _this.tableDataLoading = true;
      _this.saverFn.formSubmit(_this, formName, function() {
        if (_this.$route.query.set) {
          _this.numberValidateForm.id = _this.saverFn.local.get(
            "setCategory"
          ).id;
        }
        _this.setCategory("admin/setCategory", _this.numberValidateForm);
        _this.saverFn.local.set("setCategory", _this.numberValidateForm);
      });
      _this.tableDataLoading = false;
    },
    setCategory: async function(url, data) {
      let _this = this;
      let response = await _this.http.post(url, data);
      _this.saverFn.httpSuccess(_this, response);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../public/pubilcColor.less";

.el-breadcrumb {
  background: @bgcolor;
  padding: 10px 15px;
  border-radius: 5px;
}
.demo-ruleForm {
  background: @bgcolor;
  margin-top: 30px;
  padding: 30px 0 10px;
}
</style>
